<template>
    <div class="app-container">
      <div class="filter-container">
        <!-- <el-input
         :disabled="userState"
          v-model="queryParams.name"
          placeholder="会员手机号"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="queryBtn"
        />
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          style="margin-left: 5px"
          @click="queryBtn"
        >
          查询
        </el-button> -->
     
    
      <span style="float: right;
      margin-right: 20px;
      font-weight: 600;color: #494949;">当前账号：<span style="color: #ff770f;">{{title}}</span></span>
    
    </div>
  
      
  
      <el-table
        :header-cell-style="{ background: '#ffffff', color: '#000000' }"
        :key="tableKey"
        :row-class-name="tableRowClassName"
        v-loading="listLoading"
        :data="list"
        :row-key="'id'"
        :stripe=true
        ref="parkfieldTable"
        @selection-change="handleTableChange"
        border
        fit
        highlight-current-row
        style="
          width: 100%;
          font-size: 15px;
          box-shadow: 1px 1px 8px #cdcdcd;
          border: 0px;
        "
        :default-sort="{ prop: 'time', order: 'descending' }"
      >
        <el-table-column
          label="ID"
          prop="id"
          sortable="custom"
          align="center"
          width="80"
          :class-name="getSortClass('id')"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="用户Id" min-width="180px">
          <template slot-scope="scope">
            <span>{{ scope.row.openId }}</span>
          </template>
        </el-table-column>

        <el-table-column label="姓名" min-width="50px">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="电话" min-width="100px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单号" min-width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.outTradeNo }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="充值金额" min-width="80px">
          <template slot-scope="scope">
            <span>{{ scope.row.depositAmount }}</span>
          </template>
        </el-table-column>
    
        <el-table-column label="赠送金额" min-width="80px">
          <template slot-scope="scope">
            <span>{{ scope.row.bonusAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="充值余额" min-width="80px">
          <template slot-scope="scope">
            <span>{{ scope.row.remainDepositAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="赠送余额" min-width="80px">
          <template slot-scope="scope">
            <span>{{ scope.row.remainBonusAmount }}</span>
          </template>
        </el-table-column>

        <el-table-column label="充值日期" min-width="120px">
          <template slot-scope="scope">
            <span>{{ scope.row.createDate }}</span>
          </template>
        </el-table-column>

        
        <el-table-column label="当前状态" min-width="120px">
        <template slot-scope="{ row }">
          <el-tag
            v-if="row.status == 0"
            size="medium"
            type="info"
            style="font-size: 14px;width:80px;text-align: center;"
            >未使用</el-tag
          >
          <el-tag
            v-else-if="row.status == 1"
            size="medium"
            type="warning"
            style="font-size: 14px;width:80px;text-align: center;"
            >使用中</el-tag
          >
          <el-tag
            v-else-if="row.status == 2"
            size="medium"
            type="primary"
            style="font-size: 14px;width:80px;text-align: center;"
            >使用完</el-tag
          >
          <el-tag
            v-else-if="row.status == 3"
            size="medium"
            type="warning"
            style="font-size: 14px;width:80px;text-align: center;"
            >退款中</el-tag
          >
          <el-tag
            v-else-if="row.status == 4"
            size="success"
            type="Info"
            style="font-size: 14px;width:80px;text-align: center;"
            >退款完成</el-tag
          >
          <el-tag
            v-else-if="row.status == 5"
            size="danger"
            type="Info"
            style="font-size: 14px;width:80px;text-align: center;"
            >退款异常</el-tag
          >
          <el-tag v-else size="medium" type="danger" style="font-size: 14px">
    
        </el-tag>

        <el-button style="margin-left:10px" type="primary" size="mini" @click="statusUpdate(row)">
            <i class="el-icon-edit"></i>
            修改
          </el-button>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="200"
        class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-button type="success" size="mini" @click="handleUpdate(row)">
            <i class="el-icon-edit"></i>
            消费详情
          </el-button>
          
        </template>
      </el-table-column>



      </el-table>
  
      <el-row>
        <el-col :span="24" class="page-tool">
          <el-pagination
            layout="total,sizes,prev, pager,next,jumper"
            style="margin-top: 10px"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handlePageChange"
            @current-change="handleNoChange"
          ></el-pagination>
        </el-col>
      </el-row>


      <el-dialog title="修改状态" :visible.sync="statusVisible" :width="'500px'">
        <el-form :model="list" ref="form2">
         
   <label style="margin-left:10px;margin-right:10px;">当前状态</label>
            <el-select @change="totalParkfield" v-model="status" placeholder="请选择">
              <el-option key="0" label="未使用" value="0" ></el-option>
              <el-option key="1" label="使用中" value="1" ></el-option>
              <el-option key="2" label="使用完" value="2" ></el-option>
              <el-option key="3" label="退款中" value="3" ></el-option>
              <el-option key="4" label="退款完成" value="4" ></el-option>
              <el-option key="5" label="退款异常" value="5" ></el-option>
            </el-select>
     
   
        </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="statusVisible = false">取 消</el-button>
          <el-button type="primary" @click="lcdepositrecord()">修改</el-button>
        </div>
      </el-dialog>



      <el-dialog title="充值消费详情" :visible.sync="DetailVisible" :width="'950px'">
       
      <el-table
        :header-cell-style="{ background: '#ffffff', color: '#000000' }"
        :key="tableKey"
        :row-class-name="tableRowClassName"
        v-loading="listLoading"
        :data="detailslist"
        :row-key="'id'"
        :stripe=true
        ref="parkfieldTable"
        @selection-change="handleTableChange"
        border
        fit
        highlight-current-row
        style="
          width: 100%;
          font-size: 15px;
          box-shadow: 1px 1px 8px #cdcdcd;
          border: 0px;
        "
        :default-sort="{ prop: 'time', order: 'descending' }"
      >
       
    
        <el-table-column label="订单号" min-width="140px">
          <template slot-scope="scope">
            <span>{{ scope.row.orderId }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="站点名称" min-width="80px">
          <template slot-scope="scope">
            <span>{{ scope.row.lockName }}</span>
          </template>
        </el-table-column>
    
        <el-table-column label="消费金额" min-width="60px">
          <template slot-scope="scope">
            <span>{{ scope.row.consumeFee }}</span>
          </template>
        </el-table-column>
        <el-table-column label="mac" min-width="140px">
          <template slot-scope="scope">
            <span>{{ scope.row.lockMac }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" min-width="95px">
          <template slot-scope="scope">
            <span>{{ scope.row.createDate }}</span>
          </template>
        </el-table-column>
 

      </el-table>
       <div slot="footer" class="dialog-footer">
          <el-button @click="DetailVisible = false">关 闭</el-button>
        </div>
      </el-dialog>
  

  
      
    </div>
  </template>
  
  <style>
  
  .page-tool {
    background: rgb(237, 231, 231);
  }
  
  .page-tool div {
    text-align: right;
  }
  
  .lock-btn {
    margin-bottom: 5px;
    margin-top: -10px;
  }
  .operateBtn {
    font-size: 18px;
    width: 32px;
    height: 32px;
    padding: 0;
  }
  
  .el-table .warning-row {
    background: #fff5ee;
  }
  .el-table__body tr:hover > td {
    background-color: #fdc091;
  }
  .el-table__body tr.current-row > td {
    background-color: #fdc091;
  }
  </style>
  
  
  <script>

  import waves from "@/directive/waves"; // waves directive
  
  import { loadParkfieldsApi,loadManagerApi} from "@/api/loadParkfields";
  import { listLcDepositRecordApi,depositconsumedetailsApi,statuslcdepositrecordApi } from "@/api/member";
  
  import { getNickName, getTestUserName } from "../../utils/auth";


  
  export default {
    name: "ComplexTable",
    directives: { waves },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type];
      },
    },
    queryParams: {
      name: "",
    },
    
    data() {
      return {
        queryParams: {
          name: "",
        },
       
        roleIndex: true,
        dialogTitle: "添加会员",
        addDialog: false,
        radio:'',
        radio1:'',
        openId:'',
        statusVisible:false,
        memberVisible:false,
        addDialog2: false,
        labelWidth: "120px",
        form: {},
        cardNo:'',
        parkfieldIds:'',
        phone:'',
        detailslist:'',
        parkfieldNo:'',
        hours: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
        roleIndex: true,
        multipleSelection: [],
        tableKey: 0,
        list: [],
        parkfieldList: [],
        total: 0,
        status:'',
        id:'',
        promotionDialogTitle: "",
        promotionDialog: false,
        editFeeDialog: false,
        DetailVisible:false,
        depositAmount:'',
        bonusAmount:'',
        timeSharing: false,
        //  sortable:true,
        currentPage: 1,
        title:"",
        pageSizes: [10, 20, 40],
        pageNo: 1,
        pageSize: 20,
        listLoading: true,
        listQuery: {
          pageNo: 1,
          pageSize: 41,
          name: undefined,
          phone: undefined,
          number: undefined,
          sort: "+id",
        },
        form:{
            parkfieldId:''
        },
        managerList:'',
        importanceOptions: [1, 2, 3],
    
        showReviewer: false,
        temp: {
          id: undefined,
          importance: 1,
          remark: "",
          timestamp: new Date(),
          title: "",
          type: "",
          status: "published",
        },
        dialogFormVisible: false,
        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "Create",
        },
        searchVal: "", //默认输入为空
        letter: "", //默认不排序
        original: false, //默认从小到大排列
        dialogPvVisible: false,
        pvData: [],
        key:"",
        downloadLoading: false,
      };
    },
  


    mounted: function () {
      this.key = localStorage.getItem("key");
      this.title = localStorage.getItem("title");

      this.$nextTick(function () {
        this.listLcDepositRecord(this.pageNo, this.pageSize);
      });
    },
  
    computed: {
      userState () {
        return getNickName() === getTestUserName();
      }
    },
    
  
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 == 0) {
          return "warning-row";
        }
        return "";
      },
      getSortClass: function (key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? "ascending" : "descending";
    },
    handleCreate() {
      this.dialogFormVisible = true
      
    },

    lcdepositrecord(){
        var _this = this;
        statuslcdepositrecordApi({
            id:_this.id,
            status:_this.status
         }).then((resp) => {
       
            if (resp.errmsg === "ok") {
      
       this.$notify({
        title: "成功",
        message: "修改成功",
        type: "success"
      });
      this.listLcDepositRecord(this.pageNo, this.pageSize);
      _this.statusVisible = false
    } else {
      this.$alert('修改失败', '修改失败', {
      confirmButtonText: '关闭',});

      _this.$notify({
        title: "失败",
        message: "修改失败",
        type: "error"
      });
    }

        });

    },

    

    handleUpdate(row){
    var _this= this;
    _this.detailslist = '';
    _this.DetailVisible = true;
        depositconsumedetailsApi({
            depositId:row.id
        }).then((response) => {
          _this.detailslist = response.data;
        //   _this.total = response.data.totalNum;
          setTimeout(() => {
            _this.listLoading = false;
          }, 1 * 1000);

        });

    },

    statusUpdate(row){
    var _this= this;
    _this.status = '';
    _this.id = row.id;
    _this.statusVisible = true;
   },

  
  
      //列表页码的触发事件
      handlePageChange(pageSize) {
        this.pageSize = pageSize;
        this.listLcDepositRecord(this.pageNo, this.pageSize);
      },
      handleNoChange(pageNo) {
        this.pageNo = pageNo;
        this.listLcDepositRecord(this.pageNo, this.pageSize);
      },
      handleTableChange(val) {
        this.multipleSelection = val;
      },
      listLcDepositRecord(pageNo, pageSize) {
        let _this = this;
        _this.loading = true;
        listLcDepositRecordApi({
          pageNo: pageNo,
          pageSize: pageSize,
          roleCode:_this.key
        }).then((response) => {
          _this.list = response.data.dataList;
          _this.total = response.data.totalNum;
          setTimeout(() => {
            _this.listLoading = false;
          }, 1 * 1000);
        });
      },
      queryBtn() {
        let _this = this;
        // _this.loading = true;
        // this.loadFeedback(_this.pageNo, _this.pageSize);
        _this.memberVisible = true
      },
  
    
  
    }
  

  
  };
  
  
  
  </script>
  
  
  